<template>
    <div class="train-control-app">
        <SideBar class="side-bar" :menu="menuItems" :default-active-menu="currentPath.value"
            @menu-clicked="currentPath.value = $event">
        </SideBar>
        <!-- <div> -->
        <component class="panel" :is="currentPanel" v-if="currentPanel != null"></component>
        <!-- </div> -->

    </div>

</template>
<style lang="css">
.train-control-app {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
}

.side-bar {
    /* min-width: 250px; */
    max-width: 30%;
}

.panel {
    margin-left: 12px;
    flex-grow: 1;
    height: 100%;
}
</style>
<script lang="ts" setup>
import { ref, markRaw, computed, onMounted } from "vue";
import SideBar from "./layout/SideBar.vue"
import { createStorageProxy } from "element-sci-ui"
import { TurnoutEditPanel, TrainControlPanel, TurnoutControlPanel } from "./panels"


const currentPath = ref<{ value: string }>(createStorageProxy("current-panel", ""))
const currentPanel = computed(() => {
    const path = currentPath.value.value
    for (const menuItem of menuItems.value) {
        for (const item of menuItem.items) {
            if (item.path == path) {
                return item.component
            }
        }
    }
    return null
})
// createStorageProxy("current-panel", "")
// 定义侧边栏数据
// component字段的markRaw，作用是声明component不是响应式的数据，如此可提升性能表现。
const menuItems = ref([
    {
        title: '控制面板',
        icon: 'joystick',
        items: [
            { icon: "steam-locomotive", label: '列车控制', path: '/train-control', component: markRaw(TrainControlPanel) },
            { icon: "turnout-2", label: '道岔集中控制', path: '/turnout-control', component: markRaw(TurnoutControlPanel) },
            // { label: '条目2-2', path: '/path2-2' },
        ],
    },
    {
        title: '系统设置',
        icon: "gear",
        items: [
            { icon: "turnout-2", label: '道岔编辑', path: '/path1-1', component: markRaw(TurnoutEditPanel) },
            // { icon: "turnout-2", label: '控制器配置', path: '/controller-config', component: markRaw(ControllerConfigPanel) },
            // { label: '条目1-2', path: '/path1-2' },
        ],
    },

]);

</script>